<template>
  <view class="dynamic-detail-page">
    <!-- 加载状态 -->
    <view v-if="isLoading" class="loading-container">
      <text>加载中...</text>
    </view>
    
    <!-- 错误信息 -->
    <view v-else-if="errorMsg" class="error-container">
      <text>{{ errorMsg }}</text>
      <button @tap="loadDynamicDetail">重试</button>
    </view>
    
    <!-- 动态内容 -->
    <scroll-view v-else scroll-y class="content-scroll">
      <view class="dynamic-content">
        <!-- 用户信息 -->
        <view class="user-info-header">
          <view class="user-info">
            <image :src="dynamicData.avatar || '/static/default-avatar.png'" class="avatar" @click.stop="goToProfile(dynamicData.userId)"></image>
            <text class="username">{{ dynamicData.userName || '用户' }}</text>
          </view>
          <text class="publish-time">{{ formatDate(dynamicData.publishTime) }}</text>
        </view>
        
        <!-- 动态文本内容 -->
        <text class="content">{{ dynamicData.content }}</text>
        
        <!-- 媒体内容区域 - 参考CommunityList.vue -->
        <view class="media-container">
          
          <!-- 视频内容 -->
          <view v-if="dynamicData.video && dynamicData.video.length > 0" class="video-list">
            <video v-for="(video, videoIndex) in dynamicData.video" :key="videoIndex" :src="video" controls></video>
          </view>
          
          <!-- 图片展示 -->
          <view v-else-if="dynamicData.images && dynamicData.images.length > 0" class="wechat-image-grid" :class="getImageGridClass(dynamicData.images.length)">
            <image 
              v-for="(img, imgIndex) in dynamicData.images" 
              :key="imgIndex" 
              :src="img" 
              mode="aspectFill"
              class="wechat-image"
              @click.stop="previewImage(dynamicData.images, imgIndex)"
            ></image>
          </view>
        </view>
        
        <!-- 互动数据 -->
        <view class="post-actions" @click.stop>
          <view class="action-item" @click="toggleFavorite">
            <image class="action-icon" :src="dynamicData.favorited ? '/static/star-filled.png' : '/static/star.png'" mode="aspectFit"></image>
            <text class="action-text">{{ dynamicData.favoriteCount }}</text>
          </view>
          <view class="action-item">
            <image class="action-icon" src="/static/comment.png" mode="aspectFit"></image>
            <text class="action-text">{{ dynamicData.commentCount }}</text>
          </view>
          <view class="action-item" @click="toggleLike">
            <image class="action-icon" :src="dynamicData.liked ? '/static/like-filled.png' : '/static/like.png'" mode="aspectFit"></image>
            <text class="action-text">{{ dynamicData.likeCount }}</text>
          </view>
          <view class="action-item" @click="shareDynamic">
            <image class="action-icon" src="/static/share.png" mode="aspectFit"></image>
            <text class="action-text">{{ dynamicData.shareCount }}</text>
          </view>
        </view>
        
        <!-- 评论区 -->
        <view class="comments-section">
          <view class="section-title">评论 ({{ dynamicData.commentCount }})</view>
          <view v-if="commentList.length === 0 && !isLoadingComments" class="no-comments">
            <text>暂无评论，快来抢沙发吧~</text>
          </view>
          <!-- 评论列表 -->
          <view v-if="commentList.length > 0" class="comment-list">
            <template v-for="(comment, index) in commentList" :key="comment.id || index">
              <!-- 主评论 -->
              <view class="comment-item">
                <image :src="comment.userAvatar || '/static/default-avatar.png'" class="comment-avatar" mode="aspectFill" @click.stop="goToProfile(comment.userId)"></image>
                <view class="comment-content">
                  <view class="comment-header">
                    <text class="comment-username">{{ comment.userName || '用户' }}</text>
                    <text class="comment-time">{{ formatTime(comment.commentTime) }}</text>
                  </view>
                  <text v-if="comment.content" class="comment-text">{{ comment.content }}</text>
                  <!-- 评论图片 -->
                  <view v-if="comment.images && getCommentImages(comment.images).length > 0" class="comment-images">
                    <image 
                      v-for="(img, imgIndex) in getCommentImages(comment.images)" 
                      :key="imgIndex"
                      :src="img" 
                      mode="aspectFill"
                      class="comment-image"
                      @click="previewCommentImage(getCommentImages(comment.images), imgIndex)"
                    ></image>
                  </view>
                  <view class="comment-actions">
                    <view class="reply-btn" @click="handleReply(comment)">
                      <text class="reply-btn-text">回复</text>
                    </view>
                    <view v-if="isMyComment(comment)" class="delete-btn" @click="handleDeleteComment(comment)">
                      <text class="delete-btn-text">删除</text>
                    </view>
                  </view>
                </view>
              </view>
              
              <!-- 回复评论列表 -->
              <view v-if="comment.children && comment.children.length > 0" class="reply-list">
                <view v-for="(reply, replyIndex) in comment.children" :key="reply.id || replyIndex" class="comment-item reply-item">
                  <image :src="reply.userAvatar || '/static/default-avatar.png'" class="comment-avatar" mode="aspectFill" @click.stop="goToProfile(reply.userId)"></image>
                  <view class="comment-content">
                    <view class="comment-header">
                      <text class="comment-username">{{ reply.userName || '用户' }}</text>
                      <text class="comment-time">{{ formatTime(reply.commentTime) }}</text>
                    </view>
                    <!-- 回复关系显示 -->
                    <view v-if="reply.replyToUserName" class="reply-to">
                      <text class="reply-to-text">回复</text>
                      <text class="reply-to-name">@{{ reply.replyToUserName }}</text>
                    </view>
                    <text v-if="reply.content" class="comment-text">{{ reply.content }}</text>
                    <!-- 回复评论图片 -->
                    <view v-if="reply.images && getCommentImages(reply.images).length > 0" class="comment-images">
                      <image 
                        v-for="(img, imgIndex) in getCommentImages(reply.images)" 
                        :key="imgIndex"
                        :src="img" 
                        mode="aspectFill"
                        class="comment-image"
                        @click="previewCommentImage(getCommentImages(reply.images), imgIndex)"
                      ></image>
                    </view>
                    <view class="comment-actions">
                      <view class="reply-btn" @click="handleReply(reply)">
                        <text class="reply-btn-text">回复</text>
                      </view>
                      <view v-if="isMyComment(reply)" class="delete-btn" @click="handleDeleteComment(reply)">
                        <text class="delete-btn-text">删除</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </template>
          </view>
          <!-- 评论输入框 -->
          <view class="bottom-input">
            <view v-if="replyingComment" class="reply-hint">
              <text class="reply-hint-text">回复 {{ replyingComment.userName }}：</text>
              <text class="cancel-reply" @click="cancelReply">取消</text>
            </view>
            <!-- 图片预览 -->
            <view v-if="selectedImages.length > 0" class="image-preview-list">
              <view v-for="(img, imgIndex) in selectedImages" :key="imgIndex" class="image-preview-item">
                <image :src="img" mode="aspectFill" class="preview-image"></image>
                <view class="delete-image" @click="removeImage(imgIndex)">
                  <text class="delete-icon">×</text>
                </view>
              </view>
            </view>
            <view class="input-row">
              <button @tap="chooseImage" class="image-btn" v-if="selectedImages.length < 9">
                <image src="/static/photo.png" mode="aspectFit" class="image-icon"></image>
              </button>
              <input v-model="newComment" type="text" :placeholder="replyingComment ? `回复${replyingComment.userName}...` : '善语结善缘，恶言伤人心'" class="comment-input"/>
            <button @tap="sendComment" class="send-btn">
              <image src="/static/send-icon.png" mode="aspectFit" class="send-icon"></image>
            </button>       
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'; 
// import CommunityUtil from '@/sheep/api/index/community';
import FileApi from '@/sheep/api/infra/file';
import userStore from '@/sheep/store/user';

const dynamicData = ref({});
const commentList = ref([]);
const newComment = ref('');
const isLoading = ref(false);
const isLoadingComments = ref(false);
const errorMsg = ref('');
const dynamicId = ref('');
const replyingComment = ref(null); // 当前正在回复的评论
const selectedImages = ref([]); // 选中的图片（本地路径）
const uploadingImages = ref([]); // 上传后的图片URL

// 格式化日期（用于详情页头部）
const formatDate = (timestamp) => {
  if (!timestamp) return '';
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 格式化时间（用于评论列表，显示相对时间）
const formatTime = (timestamp) => {
  if (!timestamp) return '';
  
  let time;
  if (typeof timestamp === 'number') {
    time = new Date(timestamp);
  } else if (typeof timestamp === 'string' && !isNaN(timestamp)) {
    time = new Date(parseInt(timestamp));
  } else {
    return '';
  }
  
  if (isNaN(time.getTime())) {
    return '';
  }
  
  const now = new Date();
  const diff = now.getTime() - time.getTime();
  
  // 1分钟内：刚刚
  if (diff < 60 * 1000) {
    return '刚刚';
  }
  // 1小时内：几分钟前
  else if (diff < 60 * 60 * 1000) {
    const minutes = Math.floor(diff / (60 * 1000));
    return `${minutes}分钟前`;
  }
  // 24小时内：几小时前
  else if (diff < 24 * 60 * 60 * 1000) {
    const hours = Math.floor(diff / (60 * 60 * 1000));
    return `${hours}小时前`;
  }
  // 7天内：几天前
  else if (diff < 7 * 24 * 60 * 60 * 1000) {
    const days = Math.floor(diff / (24 * 60 * 60 * 1000));
    return `${days}天前`;
  }
  // 同一年：显示月-日
  else if (time.getFullYear() === now.getFullYear()) {
    const month = time.getMonth() + 1;
    const day = time.getDate();
    return `${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
  }
  // 跨年：显示年-月-日
  else {
    const year = time.getFullYear();
    const month = time.getMonth() + 1;
    const day = time.getDate();
    return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
  }
};

const getImageGridClass = (count) => {
  if (count === 1) return 'single-image';
  if (count === 2) return 'double-image';
  if (count === 3) return 'triple-image';
  if (count === 4) return 'four-image';
  if (count === 5) return 'five-image';
  if (count === 6) return 'six-image';
  if (count === 7) return 'seven-image';
  if (count === 8) return 'eight-image';
  if (count >= 9) return 'nine-image';
  return '';
};

// 图片预览
const previewImage = (images, currentIndex) => {
  if (images && images.length > 0) {
    uni.previewImage({
      urls: images,
      current: currentIndex,
      indicator: 'default'
    });
  }
};

// 加载动态详情
const loadDynamicDetail = async () => {
  console.log('dynamicId.value', dynamicId.value)
  if (!dynamicId.value) return;
  
  isLoading.value = true;
  errorMsg.value = '';
  
  try {
    const CommunityUtil = (await import('@/sheep/api/index/community')).default
    const res = await CommunityUtil.getCommunityDetail({ id: dynamicId.value });
    if (res.code === 0 && res.data) {
      // 处理图片数据
      const data = res.data;
      if (data.images && typeof data.images === 'string') {
        data.images = data.images.split(',').filter(img => img.trim());
      }
      // 处理视频数据
      if (data.video && typeof data.video === 'string' && data.video.trim()) {
        data.video = [data.video];
      }
      // 确保 favorited 和 liked 字段是布尔值
      // favorited: false表示未收藏，true表示已收藏
      data.favorited = !!data.favorited;
      // liked: false表示未点赞，true表示已点赞
      data.liked = !!data.liked;
      dynamicData.value = data;
      // 加载评论列表
      loadComments();
    } else {
      errorMsg.value = res.msg || '获取动态详情失败';
    }
  } catch (error) {
    console.error('获取动态详情出错:', error);
    errorMsg.value = '网络错误，请重试';
  } finally {
    isLoading.value = false;
  }
};

// 播放视频
const playVideo = () => {
  // 视频播放逻辑
};

// 切换点赞状态
const toggleLike = async () => {
  // 检查用户是否登录
  if (!userStore().isLogin) {
    uni.navigateTo({
      url: '/pages/index/login'
    });
    return;
  }
  
  try {
    const CommunityUtil = (await import('@/sheep/api/index/community')).default
    // 根据当前状态调用不同的API
    if (dynamicData.value.liked) {
      // 取消点赞
      await CommunityUtil.cancelLike({ id: dynamicData.value.id });
      dynamicData.value.liked = false;
      dynamicData.value.likeCount = Math.max(0, (dynamicData.value.likeCount || 1) - 1);
    } else {
      // 添加点赞
      await CommunityUtil.createLike({ id: dynamicData.value.id });
      dynamicData.value.liked = true;
      dynamicData.value.likeCount = (dynamicData.value.likeCount || 0) + 1;
    }
    
    // 操作成功提示
    uni.showToast({
      title: dynamicData.value.liked ? '点赞成功' : '取消点赞成功',
      icon: 'success'
    });
  } catch (error) {
    console.error('点赞操作失败:', error);
    // 恢复原来的状态
    dynamicData.value.liked = !dynamicData.value.liked;
    
    uni.showToast({
      title: dynamicData.value.liked ? '点赞失败' : '取消点赞失败',
      icon: 'none'
    });
  }
};

// 切换收藏状态
const toggleFavorite = async () => {
  // 检查用户是否登录
  if (!userStore().isLogin) {
    uni.navigateTo({
      url: '/pages/index/login'
    });
    return;
  }
  
  try {
    const CommunityUtil = (await import('@/sheep/api/index/community')).default
    // 根据当前状态调用不同的API
    if (dynamicData.value.favorited) {
      // 取消收藏
      await CommunityUtil.cancelFavorite({ id: dynamicData.value.id });
      dynamicData.value.favorited = false;
      dynamicData.value.favoriteCount = Math.max(0, (dynamicData.value.favoriteCount || 1) - 1);
    } else {
      // 添加收藏
      await CommunityUtil.createFavorite({ id: dynamicData.value.id });
      dynamicData.value.favorited = true;
      dynamicData.value.favoriteCount = (dynamicData.value.favoriteCount || 0) + 1;
    }
    
    // 操作成功提示
    uni.showToast({
      title: dynamicData.value.favorited ? '收藏成功' : '取消收藏成功',
      icon: 'success'
    });
  } catch (error) {
    console.error('收藏操作失败:', error);
    // 恢复原来的状态
    dynamicData.value.favorited = !dynamicData.value.favorited;
    
    uni.showToast({
      title: dynamicData.value.favorited ? '收藏失败' : '取消收藏失败',
      icon: 'none'
    });
  }
};

// 分享
const shareDynamic = () => {
  // 分享逻辑
  uni.showShareMenu();
};

// 加载评论列表
const loadComments = async () => {
  if (!dynamicId.value) return;
  
  isLoadingComments.value = true;
  try {
    const CommunityUtil = (await import('@/sheep/api/index/community')).default
    const res = await CommunityUtil.getCommentList({ 
      communityId: dynamicId.value 
    });
    if (res.code === 0 && res.data) {
      // 处理返回的数据，可能是数组或分页对象
      if (Array.isArray(res.data)) {
        commentList.value = res.data;
      } else if (res.data.list && Array.isArray(res.data.list)) {
        commentList.value = res.data.list;
      } else if (res.data.records && Array.isArray(res.data.records)) {
        commentList.value = res.data.records;
      } else {
        commentList.value = [];
      }
    } else {
      commentList.value = [];
    }
  } catch (error) {
    console.error('获取评论列表出错:', error);
    commentList.value = [];
  } finally {
    isLoadingComments.value = false;
  }
};

// 处理回复
const handleReply = (comment) => {
  replyingComment.value = comment;
  // 聚焦到输入框
  setTimeout(() => {
    // 在uni-app中可能需要特殊处理
  }, 100);
};

// 取消回复
const cancelReply = () => {
  replyingComment.value = null;
};

// 选择图片
const chooseImage = () => {
  const remain = 9 - selectedImages.value.length;
  if (remain <= 0) {
    uni.showToast({
      title: '最多选择9张图片',
      icon: 'none'
    });
    return;
  }
  
  uni.chooseImage({
    count: remain,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      selectedImages.value = [...selectedImages.value, ...res.tempFilePaths];
    },
    fail: (err) => {
      console.error('选择图片失败:', err);
      if (err.errMsg && !err.errMsg.includes('cancel')) {
        uni.showToast({
          title: '选择图片失败',
          icon: 'none'
        });
      }
    }
  });
};

// 删除选中的图片
const removeImage = (index) => {
  selectedImages.value.splice(index, 1);
  uploadingImages.value.splice(index, 1);
};

// 处理评论图片数据（可能是字符串或数组）
const getCommentImages = (images) => {
  if (!images) return [];
  if (Array.isArray(images)) {
    return images.filter(img => img);
  }
  if (typeof images === 'string') {
    return images.split(',').filter(img => img.trim());
  }
  return [];
};

// 预览评论图片
const previewCommentImage = (images, currentIndex) => {
  if (images && images.length > 0) {
    uni.previewImage({
      urls: images,
      current: currentIndex || 0
    });
  }
};

// 判断是否是当前用户的评论
const isMyComment = (comment) => {
  if (!comment || !comment.userId) return false;
  const currentUser = userStore().userInfo;
  return currentUser && currentUser.id && currentUser.id === comment.userId;
};

// 删除评论
const handleDeleteComment = (comment) => {
  if (!comment || !comment.id) return;
  
  uni.showModal({
    title: '提示',
    content: '确定要删除这条评论吗？',
    confirmText: '删除',
    confirmColor: '#ff0000',
    success: async (res) => {
      if (res.confirm) {
        try {
          const CommunityUtil = (await import('@/sheep/api/index/community')).default
          const result = await CommunityUtil.deleteComment({ id: comment.id });
          if (result.code === 0) {
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
            // 刷新动态详情（会同时刷新评论列表和评论数量）
            await loadDynamicDetail();
          } else {
            uni.showToast({
              title: result.msg || '删除失败',
              icon: 'none'
            });
          }
        } catch (error) {
          console.error('删除评论失败:', error);
          uni.showToast({
            title: '删除失败，请重试',
            icon: 'none'
          });
        }
      }
    }
  });
};

// 发送评论
const sendComment = async () => {
  if (!newComment.value.trim() && selectedImages.value.length === 0) {
    uni.showToast({
      title: '请输入评论内容或选择图片',
      icon: 'none'
    });
    return;
  }
  if (!dynamicId.value) {
    uni.showToast({
      title: '动态ID不存在',
      icon: 'none'
    });
    return;
  }
  
  try {
    // 如果有图片，先上传图片
    uploadingImages.value = [];
    if (selectedImages.value.length > 0) {
      uni.showLoading({
        title: '上传图片中...'
      });
      
      try {
        const uploadTasks = selectedImages.value.map(async (imagePath) => {
          const result = await FileApi.uploadFile(imagePath, 'community-comment');
          return result?.data || null;
        });
        
        const uploaded = await Promise.all(uploadTasks);
        uploadingImages.value = uploaded.filter(url => url !== null);
        
        if (uploadingImages.value.length !== selectedImages.value.length) {
          uni.showToast({
            title: '部分图片上传失败',
            icon: 'none'
          });
        }
      } catch (uploadError) {
        console.error('上传图片失败:', uploadError);
        uni.showToast({
          title: '图片上传失败，请重试',
          icon: 'none'
        });
        uni.hideLoading();
        return;
      }
      
      uni.hideLoading();
    }
    
    const params = {
      communityId: dynamicId.value,
      content: newComment.value.trim() || ''
    };
    
    // 如果有图片，添加图片参数（可能是字符串用逗号分隔，或数组）
    if (uploadingImages.value.length > 0) {
      params.images = uploadingImages.value.join(',');
    }
    
    // 如果是回复评论，添加回复相关参数
    if (replyingComment.value) {
      // 如果被回复的评论本身是回复（有parentId且不为0），则使用其parentId作为新回复的parentId
      // 否则使用被回复评论的id作为parentId
      if (replyingComment.value.parentId && replyingComment.value.parentId !== 0) {
        params.parentId = replyingComment.value.parentId;
      } else {
        params.parentId = replyingComment.value.id;
      }
      params.replyToUserId = replyingComment.value.userId;
    }
    
    const CommunityUtil = (await import('@/sheep/api/index/community')).default
    const res = await CommunityUtil.createComment(params);
    
    if (res.code === 0) {
      // 发送成功后清空输入框和图片并刷新评论列表
  newComment.value = '';
      selectedImages.value = [];
      uploadingImages.value = [];
      replyingComment.value = null;
      // 刷新评论列表
      await loadComments();
      // 更新评论数量
      if (dynamicData.value.commentCount !== undefined) {
        dynamicData.value.commentCount++;
      }
    } else {
      uni.showToast({
        title: res.msg || '评论失败，请重试',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('发送评论出错:', error);
    uni.hideLoading();
    uni.showToast({
      title: '评论失败，请重试',
      icon: 'none'
    });
  }
};

// 跳转到个人主页
const goToProfile = (userId) => {
  if (!userId) return
  uni.navigateTo({
    url: `/pages/user/profile?userId=${userId}`
  })
}

// 页面加载时获取数据
onLoad(options => {
  // 从页面参数中获取动态ID
  if (options.id) {
    dynamicId.value = options.id;
    loadDynamicDetail();
  } else {
    errorMsg.value = '未找到动态ID';
  }
});
</script>

<style scoped>
/* 页面容器样式 */
.dynamic-detail-page {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 加载和错误状态样式 */
.loading-container,
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50rpx;
}

/* 滚动容器 */
.content-scroll {
  width: 100%;
  min-height: 100vh;
  padding: 17rpx 17rpx;
  box-sizing: border-box; 
}

/* 动态内容样式 */
.dynamic-content {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 15rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.user-info-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 15rpx;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 60rpx;
  height: 60rpx;
  background-color: #f0f0f0;
  border-radius: 50%;
  margin-right: 15rpx;
}

.username {
  font-size: 28rpx;
  font-weight: 500;
}

.publish-time {
  font-size: 22rpx;
  color: #999;
  align-self: flex-start;
  padding-top: 15rpx;
}

.content {
  font-size: 28rpx;
  line-height: 44rpx;
  margin-bottom: 20rpx;
  color: #333;
}

.media-container {
  margin: 20rpx 0;
}

.video-list video {
  width: 100%;
  height: 400rpx;
  margin-bottom: 10rpx;
  border-radius: 10rpx;
}

.wechat-image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4rpx;
  width: 100%;
}

/* 单张图片 */
.wechat-image-grid.single-image .wechat-image {
  width: 100%;
  height: 400rpx;
  border-radius: 15rpx;
}

/* 两张图片 */
.wechat-image-grid.double-image {
  display: flex;
  flex-wrap: nowrap;
  gap: 15rpx;
  width: 100%;
}

.wechat-image-grid.double-image .wechat-image {
  flex: 1;
  height: 200rpx;
  border-radius: 15rpx;
  min-width: 0;
}

/* 三张图片 */
.wechat-image-grid.triple-image {
  display: flex;
  flex-wrap: nowrap;
  gap: 15rpx;
  width: 100%;
}

.wechat-image-grid.triple-image .wechat-image {
  flex: 1;
  height: 200rpx;
  border-radius: 15rpx;
  min-width: 0;
}

/* 四张图片 */
.wechat-image-grid.quadruple-image {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  width: 100%;
}

.wechat-image-grid.quadruple-image .wechat-image {
  width: calc(50% - 2rpx);
  height: 200rpx;
  border-radius: 15rpx;
}

/* 五张图片 */
.wechat-image-grid.five-image {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  width: 100%;
}

.wechat-image-grid.five-image .wechat-image:nth-child(1),
.wechat-image-grid.five-image .wechat-image:nth-child(2) {
  width: calc(50% - 2rpx);
  height: 200rpx;
  border-radius: 15rpx;
}

.wechat-image-grid.five-image .wechat-image:nth-child(3),
.wechat-image-grid.five-image .wechat-image:nth-child(4),
.wechat-image-grid.five-image .wechat-image:nth-child(5) {
  width: calc(33.333% - 3rpx);
  height: 200rpx;
  border-radius: 15rpx;
}

/* 六张图片 */
.wechat-image-grid.six-image {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  width: 100%;
}

.wechat-image-grid.six-image .wechat-image {
  width: calc(33.333% - 3rpx);
  height: 200rpx;
  border-radius: 15rpx;
}

/* 七张图片 */
.wechat-image-grid.seven-image {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  width: 100%;
}

.wechat-image-grid.seven-image .wechat-image:nth-child(1),
.wechat-image-grid.seven-image .wechat-image:nth-child(2),
.wechat-image-grid.seven-image .wechat-image:nth-child(3) {
  width: calc(33.333% - 3rpx);
  height: 200rpx;
  border-radius: 15rpx;
}

.wechat-image-grid.seven-image .wechat-image:nth-child(4),
.wechat-image-grid.seven-image .wechat-image:nth-child(5) {
  width: calc(50% - 2rpx);
  height: 200rpx;
  border-radius: 15rpx;
}

.wechat-image-grid.seven-image .wechat-image:nth-child(6),
.wechat-image-grid.seven-image .wechat-image:nth-child(7) {
  width: calc(50% - 2rpx);
  height: 200rpx;
  border-radius: 15rpx;
}

/* 八张图片 */
.wechat-image-grid.eight-image {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  width: 100%;
}

.wechat-image-grid.eight-image .wechat-image:nth-child(1),
.wechat-image-grid.eight-image .wechat-image:nth-child(2),
.wechat-image-grid.eight-image .wechat-image:nth-child(3) {
  width: calc(33.333% - 3rpx);
  height: 200rpx;
  border-radius: 15rpx;
}

.wechat-image-grid.eight-image .wechat-image:nth-child(4),
.wechat-image-grid.eight-image .wechat-image:nth-child(5),
.wechat-image-grid.eight-image .wechat-image:nth-child(6) {
  width: calc(33.333% - 3rpx);
  height: 200rpx;
  border-radius: 15rpx;
}

.wechat-image-grid.eight-image .wechat-image:nth-child(7),
.wechat-image-grid.eight-image .wechat-image:nth-child(8) {
  width: calc(50% - 2rpx);
  height: 200rpx;
  border-radius: 15rpx;
}

/* 九张图片 */
.wechat-image-grid.nine-image {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  width: 100%;
}

.wechat-image-grid.nine-image .wechat-image {
  width: calc(33.333% - 3rpx);
  height: 200rpx;
  border-radius: 15rpx;
}

/* 图片通用样式 */
.wechat-image {
  object-fit: cover;
  background-color: #f5f5f5;
}

.post-actions {
  display: flex;
  justify-content: flex-end;
  gap: 40rpx;
  padding: 20rpx 0;
  border-top: 1rpx solid #eee;
  margin-bottom: 20rpx;
}

.action-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8rpx;
  cursor: pointer;
}

.action-icon {
  width: 32rpx;
  height: 32rpx;
}

.action-text {
  font-size: 24rpx;
  color: #666;
}

/* 评论区样式 */
.comments-section {
  margin-top: 20rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.no-comments {
  text-align: center;
  color: #999;
  padding: 40rpx 0;
  font-size: 26rpx;
}

/* 评论列表样式 */
.comment-list {
  margin-bottom: 20rpx;
}

.comment-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.comment-item:last-child {
  border-bottom: none;
}

/* 回复评论列表样式 */
.reply-list {
  margin-left: 80rpx;
  margin-top: 10rpx;
  padding-left: 20rpx;
  border-left: 2rpx solid #f0f0f0;
}

.reply-item {
  padding: 15rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.reply-item:last-child {
  border-bottom: none;
}

.reply-item .comment-avatar {
  width: 50rpx;
  height: 50rpx;
}

.comment-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  background-color: #f0f0f0;
  flex-shrink: 0;
}

.comment-content {
  flex: 1;
  min-width: 0;
}

.comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.comment-username {
  font-size: 26rpx;
  font-weight: 500;
  color: #333;
}

.comment-time {
  font-size: 22rpx;
  color: #999;
  flex-shrink: 0;
  margin-left: 20rpx;
}

/* 回复关系显示 */
.reply-to {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
  font-size: 24rpx;
}

.reply-to-text {
  color: #999;
  margin-right: 8rpx;
}

.reply-to-name {
  color: #576b95;
}

.comment-text {
  font-size: 28rpx;
  color: #666;
  line-height: 40rpx;
  margin-bottom: 10rpx;
  word-break: break-all;
}

/* 评论图片样式 */
.comment-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  margin: 10rpx 0;
}

.comment-image {
  width: 150rpx;
  height: 150rpx;
  border-radius: 8rpx;
  background-color: #f5f5f5;
}

.comment-actions {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}

.reply-btn {
  padding: 8rpx 16rpx;
}

.reply-btn-text {
  font-size: 24rpx;
  color: #576b95;
}

.delete-btn {
  padding: 8rpx 16rpx;
  margin-left: 20rpx;
}

.delete-btn-text {
  font-size: 24rpx;
  color: #ff0000;
}

/* 底部输入框样式 */
.bottom-input {
  display: flex;
  flex-direction: column;
  padding: 20rpx 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top: 1rpx solid #eee;
  padding: 20rpx;
}

.reply-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx 15rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  margin-bottom: 10rpx;
}

.reply-hint-text {
  font-size: 24rpx;
  color: #576b95;
  flex: 1;
}

.cancel-reply {
  font-size: 24rpx;
  color: #999;
  padding: 5rpx 10rpx;
}

.comment-input {
  flex: 1;
  height: 80rpx;
  background-color: #f5f5f5;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
}

.input-row {
  display: flex;
  align-items: center;
  width: 100%;
}

.bottom-input > .comment-input {
  width: 100%;
  margin-bottom: 0;
}

.send-btn {
  margin-left: 20rpx;
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  flex-shrink: 0;
}

.send-btn::after {
  border: none;
}

.send-icon {
  width: 56rpx;
  height: 56rpx;
  color: #fff;
}

/* 图片预览列表样式 */
.image-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  margin-bottom: 10rpx;
  padding: 10rpx;
  background-color: #f9f9f9;
  border-radius: 8rpx;
}

.image-preview-item {
  position: relative;
  width: 150rpx;
  height: 150rpx;
}

.preview-image {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
  background-color: #f5f5f5;
}

.delete-image {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-icon {
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  line-height: 1;
}

.image-btn {
  width: 80rpx;
  height: 80rpx;
  padding: 0;
  margin-right: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
  flex-shrink: 0;
}

.image-btn::after {
  border: none;
}

.image-icon {
  width: 56rpx;
  height: 56rpx;
}

/* 适配小屏幕 */
@media screen and (max-width: 320px) {
  .avatar {
    width: 50rpx;
    height: 50rpx;
  }
  
  .username {
    font-size: 26rpx;
  }
  
  .content {
    font-size: 26rpx;
    line-height: 40rpx;
  }
  
  .video-list video {
    height: 350rpx;
  }
}

/* 适配大屏幕 */
@media screen and (min-width: 480px) {
  .dynamic-content {
    padding: 30rpx;
  }
  
  .avatar {
    width: 70rpx;
    height: 70rpx;
  }
  
  .username {
    font-size: 30rpx;
  }
  
  .content {
    font-size: 30rpx;
    line-height: 48rpx;
  }
  
  .video-list video {
    height: 450rpx;
  }
}
</style>